
<template>
    <div>
        <Row>
            <Col span="4"><h1>管理员添加操作</h1></Col>
            <Col span="13"><Button type="primary" size="large" @click="exportData"><Icon type="ios-download-outline"></Icon>导出表格数据</Button></Col> 
            <Col span="1"><Button type="primary" size="large" @click="totalClick">全部</Button></Col>
            <Col span="6">
                <Input v-model="search">                    
                    <Button slot="append" icon="ios-search" @click="findOne"></Button>
                </Input>
            </Col>   
        </Row>  
        <Table :columns="columns1" :data="data1" ref="table"></Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="dataCount" :page-size="pageSize" show-total @on-change="changePage"></Page>
            </div>
        </div>        
    </div>
</template>
<script>
export default {
    data() {
        return {
            pageSize:10,
            dataCount:0,
            search:"",
            historyDate:[],
            columns1: [               
                {
                    title: "操作时间",
                    key: "create_time",
                    render:(h,params)=>{
                        return h('div', function(){
                            let n = Date.parse(params.row.create_time);
                            let date = new Date();
                            date.setTime(n);
                            return date.toLocaleString();
                        }())
                    }
                },
                {
                    title: "操作描述",
                    key: "des"
                },
                {
                    title: "管理员",
                    key: "aname"
                },                
            ],            
            data1: [ 
            ]            
        };
    },
    mounted() {
        this.getService();
    },
    methods: {
        totalClick(){
            this.getService();
        },
        changePage(index){
            let start = (index - 1) * this.pageSize;
            let end = index * this.pageSize;
            this.data1 = this.historyDate.slice(start, end);
        },
        findOne(){
            let search = this.search; 
            let a = [];
            for (let i = 0; i < this.historyDate.length; i++) {
                if (this.historyDate[i].des.indexOf(search) != -1){
                    a.push(this.historyDate[i]);
                }                
            }  
            this.historyDate = a;         
            this.dataCount = this.historyDate.length;
            if (this.historyDate.length <= this.pageSize){
                this.data1 = this.historyDate;
            }else{
                this.data1 = this.historyDate.slice(0, this.pageSize);
            }        
        },      
        getService(){
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/getControl`,
                data: qs.stringify({type:4})
                }).then(response => {
                    if ((response.data.result == 200)) {
                        this.historyDate = response.data.data;
                        this.dataCount = this.historyDate.length;
                        if (this.historyDate.length <= this.pageSize){
                            this.data1 = this.historyDate;
                        }else{
                            this.data1 = this.historyDate.slice(0, this.pageSize);
                        }
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });
        },                
        exportData(){
            this.$refs.table.exportCsv({
                filename: '管理员添加操作',
                columns:this.columns1,
                data:this.data1                          
            });
        },
    }
};
</script>

   



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
    margin: 20px 0px;
}
</style>
